﻿@*ko template*@
<div>
    <script type="text/html" id="additional-questions-template">
        <div class="additional-questions">
            <p>Additional Question</p>
            <table cellspacing="0" cellpadding="0">
                <thead>
                    <tr>
                        <td>#</td>
                        <td>Description</td>
                    </tr>
                </thead>
                <tbody>
                    <!-- ko foreach: AdditionalQuestions -->
                    <tr>
                        <td data-bind="text: Id"></td>
                        <td data-bind="text: Description"></td>
                    </tr>
                    <!-- /ko -->

                    <tr data-bind="visible: haveAdditionalQuestionNOT">
                        <td colspan="2">No child records to display</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </script>

    <script type="text/html" id="addons-template">
        <div class="addons">
            <p>Addons</p>
            <table>
                <thead>
                    <tr>
                        <td>#</td>
                        <td>Qty</td>
                        <td>Code</td>
                        <td>Desc</td>
                        <td>Price</td>
                    </tr>
                </thead>
                <tbody>
                    <!-- ko foreach: Addons -->
                    <tr>
                        <td data-bind="text: Id">#</td>
                        <td data-bind="text: Quantity">Qty</td>
                        <td data-bind="text: Code">Code</td>
                        <td data-bind="text: Description">Desc</td>
                        <td data-bind="text: Price">Price</td>
                    </tr>
                    <!-- /ko -->

                    <tr data-bind="visible: haveAddonNOT">
                        <td colspan="5">No child records to display</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </script>

    <script type="text/html" id="line-item-template">
        <tr data-bind="css: { 'bg-active': isExpand, odd: ($index() % 2) == 1, even: ($index() % 2) == 0 }">
            <td class="bg-header-light collapse-expand" data-bind="text: textIndicator, click: toggleLine"></td>
            <td>
                <input type="checkbox" data-bind="checked: Select" />
            </td>
            <td data-bind="text: Id">#</td>
            <td>
                <input type="text" data-bind="value: Quantity" />
            </td>
            <td data-bind="text: Code">Code</td>
            <td data-bind="text: Description">Desc</td>
            <td data-bind="text: Width">Width</td>
            <td data-bind="text: Height">Height</td>
            <td data-bind="text: Depth">Depth</td>
            <td data-bind="text: Hinge">Hinge</td>
            <td data-bind="text: FE">FE</td>
            <td>
                <a href="#" data-bind="click: nextClick">Next</a>
            </td>
            <td>
                <a href="#" data-bind="click: lineCompareClick">Line Comp.</a>
            </td>
            <td>
                <a href="#" data-bind="click: editClick">Edit</a>
            </td>
        </tr>

        <tr data-bind="visible: isExpand, css: { odd: ($index() % 2) == 1, even: ($index() % 2) == 0 }">
            <td class="bg-header-light"></td>
            <td colspan="13">
                <div data-bind="template: { name: 'additional-questions-template', data: $data }"></div>
                <div data-bind="template: { name: 'addons-template', data: $data }"></div>
            </td>
        </tr>

    </script>
</div>

<div class="grid-view-container">
    <div class="header">
        <button data-bind="click: addLineItem" class="add">Add</button>
        <div class="right">
            <button class="refresh" data-bind="click: reset">Refresh</button>
            <span>Refresh</span>
        </div>
        <div class="clear"></div>
    </div>
    <table class="grid-view" cellspacing="0" cellpadding="0">
        <thead class="bg-header-light">
            <tr>
                <td>
                </td>
                <td></td>
                <td>#</td>
                <td>QTY</td>
                <td>Code</td>
                <td>Desc</td>
                <td>Width</td>
                <td>Height</td>
                <td>Depth</td>
                <td>Hinge</td>
                <td>FE</td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </thead>
        <tbody data-bind="template: { name: 'line-item-template', foreach: LineItems }">
        </tbody>
    </table>
    
    <button data-bind="click: save">Save</button>
</div>
